<template>
  <div>
    <ContentPanel>
      <div class="search-form">
        <el-input
          v-model="keyword"
          placeholder="请输入联系人或群组名称"
          @keyword.enter="search"
        ></el-input>
        <el-button :icon="Search" type="primary" @click="search" />
      </div>
      <div v-if="searchResult.length > 0" class="search-result">
        <div v-for="item in searchResult" :key="item.contactId" class="search-result-item">
          <span
            :class="[
              'contact-type',
              item.contactType == '群' ? 'contact-type-group' : 'contact-type-user'
            ]"
          >
            {{ item.contactId === userInfoStore.userId ? '自己' : item.contactType }}
          </span>
          <div class="contact-avatar">
            <img :src="getImgUrl(item.contactId)" alt="" />
          </div>
          <div class="contact-info">
            <div class="name">{{ item.name }}</div>
            <div>ID：{{ item.contactId }}</div>
            <div>地区：{{ item.areaName }}</div>
          </div>
          <div class="contact-action">
            <el-button v-if="[0, 2, 3, 4].includes(item.status)" type="primary" size="small">
              添加
            </el-button>
          </div>
        </div>
      </div>
      <div v-else class="no-data">没有搜索到任何结果</div>
    </ContentPanel>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import Request from '@/utils/request'
import Api from '@/utils/api'
import useUserInfoStore from '@/store/userInfoStore'
import Message from '@/utils/message'
import { getImgUrl } from '@/config/globalConfig'

const userInfoStore = useUserInfoStore()
const keyword = ref('')
const searchResult = ref([])

async function search() {
  if (keyword.value.trim() === '') return Message.warning('请输入联系人或群组名称')
  const res = await Request({
    url: `${Api.search}/${userInfoStore.userId}`,
    method: 'GET',
    params: { keyword: keyword.value }
  })
  searchResult.value = res.data || []
}
</script>

<style scoped lang="scss">
.search-form {
  display: flex;
  justify-content: center;
  padding-top: 100px;

  &:deep(.el-input__wrapper) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    background-color: transparent;
  }
  &:deep(.el-button) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}
.no-data {
  height: 30vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #999;
}
.search-result {
  padding: 16px;
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(20px);
  border-radius: 8px;
  margin-top: 16px;
  .search-result-item {
    display: flex;
    position: relative;
    .contact-type {
      position: absolute;
      top: -16px;
      left: -16px;
      display: inline-block;
      padding: 2px;
      width: 30px;
      z-index: 1;
      font-size: 10px;
      border-radius: 2px;
      color: #fff;
      text-align: center;
    }
    .contact-type-user {
      background-color: var(--base-color);
    }
    .contact-type-group {
      background-color: var(--base-color2);
    }
    .contact-avatar {
      width: 50px;
      height: 50px;
      img {
        height: 100%;
      }
    }
    .contact-info {
      font-size: 12px;
      color: #999;
      margin-left: 8px;
      .name {
        font-size: 16px;
        color: #333;
      }
    }
  }
}
</style>
